<template>
  <custom-window :title="title">
    <div class="content">
      <div class="echarts" ref='echartsRight1' id="echartsRight1" ></div>
    </div>
  </custom-window>
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
export default {
  mixins: [minxin],
  name: 'CardItem2',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {}
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getData().then(() => {
      this.initTimer()
    })
    // this.initChart()
  },
  beforeDestroy () {
    clearInterval(this._timer)
  },
  methods: {
    initTimer () {
      this._timer = setInterval(this.getData, 60 * 60 * 1000)
    },
    getData () {
      return this.$axios.get(this.$apis.screen.selectYgInfoTypeList).then(res => {
        console.log('res: ', res)
        if (res) {
          this.initChart(res)
        }
      })
    },

    initChart (data) {
      console.log('data: ', data)
      const maxList = []
      const dataY = data.typeName || []
      let values = []
      if (data.ygWeight) {
        const numberArray = data.ygWeight.map(item => (item - 0))
        values = numberArray
        const max = Math.max(...numberArray)
        for (let i = 0; i < data.ygWeight.length; i++) {
          maxList.push(max)
        }
      }

      this.$nextTick(() => {
        const echart1 = this.$getChartInstance('#echartsRight1')

        const CubeLeft = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const yAxisPoint = shape.yAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x + 5, shape.y - 5]
            const c2 = [yAxisPoint[0] + 5, yAxisPoint[1] - 5]
            const c3 = [yAxisPoint[0], yAxisPoint[1]]
            ctx
              .moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath()
          }
        })
        const CubeRight = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const yAxisPoint = shape.yAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [yAxisPoint[0], yAxisPoint[1]]
            const c3 = [yAxisPoint[0] + 5, yAxisPoint[1] + 10]
            const c4 = [shape.x + 5, shape.y + 10]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })
        const CubeTop = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + 5, shape.y + 10]
            const c3 = [shape.x + 10, shape.y + 5]
            const c4 = [shape.x + 5, shape.y - 5]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })
        this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
        this.$echarts.graphic.registerShape('CubeRight', CubeRight)
        this.$echarts.graphic.registerShape('CubeTop', CubeTop)
        const options = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '2%',
            top: '2%',
            containLabel: true
          },
          yAxis: {
            type: 'category',
            data: dataY,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#7DFFFD'
              }
            },
            axisLabel: {
              fontSize: this.$px2vw(12)
            }

          },
          xAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              fontSize: this.$px2vw(12)
            }
            // boundaryGap: ['10%', '1%']
          },
          series: [
            {
              type: 'custom',
              renderItem: function (params, api) {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: 'rgba(7,29,97,.6)'
                      }
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: 'rgba(10,35,108,.7)'
                      }
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: 'rgba(11,42,106,.8)'
                      }
                    }
                  ]
                }
              },
              data: maxList
            },
            {
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                          {
                            offset: 0,
                            color: '#3B80E2'
                          },
                          {
                            offset: 1,
                            color: '#49BEE5'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                          {
                            offset: 0,
                            color: '#3B80E2'
                          },
                          {
                            offset: 1,
                            color: '#49BEE5'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        yAxisPoint: api.coord([0, api.value(1)])
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                          {
                            offset: 0,
                            color: '#3B80E2'
                          },
                          {
                            offset: 1,
                            color: '#49BEE5'
                          }
                        ])
                      }
                    }
                  ]
                }
              },
              data: values
            },
            {
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  formatter: e => {
                    return values[e.dataIndex]
                  },
                  fontSize: this.$px2vw(12),
                  color: '#fff',
                  offset: [10, 4]
                }
              },
              itemStyle: {
                color: 'transparent'
              },
              data: maxList
            }
          ]
        }

        echart1.clear()
        echart1.setOption(options)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  // do something
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
